<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="日语假名输入器，简单易用的罗马音到假名转换工具，由 Kibidango086 驱动" />
    <title>日语假名输入器</title>
	<link rel="icon" href="/icon.png" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --md-sys-color-primary: #6750A4;
            --md-sys-color-primary-container: #EADDFF;
            --md-sys-color-on-primary: #FFFFFF;
            --md-sys-color-on-primary-container: #21005D;
            --md-sys-color-secondary: #625B71;
            --md-sys-color-secondary-container: #E8DEF8;
            --md-sys-color-on-secondary-container: #1D192B;
            --md-sys-color-surface: #FFFBFE;
            --md-sys-color-surface-variant: #E7E0EC;
            --md-sys-color-on-surface: #1C1B1F;
            --md-sys-color-on-surface-variant: #49454F;
            --md-sys-color-outline: #79747E;
            --md-sys-color-outline-variant: #CAC4D0;
            --md-sys-color-error: #BA1A1A;
            --md-sys-color-error-container: #FFDAD6;
            --md-sys-color-on-error-container: #410002;
        }

        body {
            font-family: 'Noto Sans SC', 'Roboto', sans-serif;
            background-color: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 24px;
            flex: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 48px;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 400;
            color: var(--md-sys-color-primary);
            margin-bottom: 16px;
        }

        .header p {
            font-size: 1.125rem;
            color: var(--md-sys-color-on-surface-variant);
        }

        textarea {
            font-family: 'Noto Sans JP', 'Roboto', sans-serif;
        }

        .input-section {
            background: var(--md-sys-color-surface);
            border-radius: 28px;
            padding: 32px;
            margin-bottom: 32px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        }

        .input-group {
            margin-bottom: 24px;
        }

        .input-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--md-sys-color-on-surface-variant);
            margin-bottom: 8px;
        }

        .input-field {
            width: 100%;
            padding: 16px;
            border: 2px solid var(--md-sys-color-outline-variant);
            border-radius: 16px;
            font-size: 1rem;
            background: var(--md-sys-color-surface);
            color: var(--md-sys-color-on-surface);
            transition: border-color 0.2s ease;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--md-sys-color-primary);
        }

        .output-field {
            background: var(--md-sys-color-primary-container);
            color: var(--md-sys-color-on-primary-container);
            border-color: var(--md-sys-color-primary);
            font-size: 1.25rem;
            min-height: 120px;
            resize: vertical;
        }

        .button-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border: none;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .btn-primary {
            background: var(--md-sys-color-primary);
            color: var(--md-sys-color-on-primary);
        }

        .btn-primary:hover {
            background: #5a4691;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .btn-secondary {
            background: var(--md-sys-color-secondary-container);
            color: var(--md-sys-color-on-secondary-container);
        }

        .btn-secondary:hover {
            background: #d4c9e8;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .tutorial-section {
            background: var(--md-sys-color-secondary-container);
            border-radius: 28px;
            padding: 32px;
            margin-bottom: 32px;
        }

        .tutorial-section h2 {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--md-sys-color-on-secondary-container);
            margin-bottom: 16px;
        }

        .tutorial-content {
            color: var(--md-sys-color-on-secondary-container);
        }

        .tutorial-content ul {
            padding-left: 20px;
            margin-bottom: 16px;
        }

        .tutorial-content li {
            margin-bottom: 8px;
        }

        .tutorial-content a {
            color: var(--md-sys-color-on-surface-variant);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .tutorial-content a:hover {
            color: var(--md-sys-color-primary);
        }

        .example-box {
            background: var(--md-sys-color-surface);
            border-radius: 16px;
            padding: 16px;
            margin: 16px 0;
            border-left: 4px solid var(--md-sys-color-primary);
        }

        .footer {
            background: var(--md-sys-color-surface-variant);
            padding: 24px;
            text-align: center;
            margin-top: auto;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .footer-links a {
            color: var(--md-sys-color-on-surface-variant);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--md-sys-color-primary);
        }

        .footer p {
            color: var(--md-sys-color-on-surface-variant);
            font-size: 0.875rem;
        }

        .toast {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--md-sys-color-on-surface);
            color: var(--md-sys-color-surface);
            padding: 16px 24px;
            border-radius: 8px;
            font-size: 0.875rem;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .toast.show {
            opacity: 1;
        }

        @media (max-width: 600px) {
            .container {
                padding: 16px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .input-section {
                padding: 24px;
            }

            .button-group {
                flex-direction: column;
            }

            .btn {
                width: 100%;
                justify-content: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 16px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="header" id="headerlnk">
            <h1>日语假名输入器</h1>
            <p>简单易用的罗马音到假名转换工具</p>
        </header>

        <div class="input-section" id="inputlnk">
            <div class="input-group">
                <label class="input-label">罗马音输入 (小写→平假名，大写→片假名)</label>
                <textarea id="romanInput" class="input-field"
                    placeholder="请输入罗马音，例如：konnichiwa, sakki, xtsu"></textarea>
            </div>

            <div class="input-group">
                <label class="input-label">假名输出</label>
                <textarea id="kanaOutput" class="input-field output-field" readonly
                    placeholder="変換された仮名はここに表示されます"></textarea>
            </div>

            <div class="button-group">
                <button id="copyBtn" class="btn btn-primary">
                    <span class="material-icons">content_copy</span>
                    复制结果
                </button>
                <button id="pasteBtn" class="btn btn-secondary">
                    <span class="material-icons">content_paste</span>
                    粘贴输入
                </button>
                <button id="clearBtn" class="btn btn-secondary">
                    <span class="material-icons">clear</span>
                    清空内容
                </button>
            </div>
        </div>

        <div class="tutorial-section" id="tuto1lnk">
            <h2>声明</h2>
            <div class="tutorial-content">
                <li>本人完全是日语<strong>初学者</strong>，本人创建此网页用于自己在没有日语输入法的设备上临时输入假名。</li>
                <li>本网页绝大部分由 AI 完成。</li>
                <li>对于错误，你可以在 <a href="#footerlnk">Github 仓库</a>中提出 issue 。</li>
            </div>
            <h2>教程</h2>
            <div class="tutorial-content" id="tuto2lnk">
                <ul>
                    <li><strong>小写字母</strong>：输入小写罗马音将转换为平假名</li>
                    <li><strong>大写字母</strong>：输入大写罗马音将转换为片假名</li>
                    <li><strong>混合输入</strong>：可以混合使用大小写字母，系统会自动区分</li>
                    <li><strong>实时转换</strong>：输入时即时显示转换结果</li>
                    <li><strong>长音符输入</strong>：-、_、~ → ー</li>
                    <li><strong>促音输入</strong>：支持两种促音输入方式：
                        <ul style="margin-top: 8px;">
                            <li>直接输入：xtsu、xtu、ltsu、ltu → っ/ッ</li>
                            <li>重复子音：kki → っき，tto → っと</li>
                        </ul>
                    </li>
                    <li><strong>小写假名</strong>：xa、xi、xu、xe、xo → ぁぃぅぇぉ</li>
                    <li><strong>外来语用</strong>：va、vi、ve、vo、fa、fi、fe、fo等</li>
                    <li><strong>替代拼写</strong>：si→し、zi→じ、ti→ち、tu→つ、hu→ふ</li>
                    <li><strong>保持原样</strong>：非英文字符和无法组成假名的字符保持不变</li>
                </ul>

                <div class="example-box">
                    <strong>基本示例：</strong><br>
                    konnichiwa → こんにちは<br>
                    KONNICHIWA → コンニチハ<br>
                    arigatou gozaimasu → ありがとう ございます<br><br>

                    <strong>长音符示例：</strong><br>
                    ko-hi- → コーヒー<br>
                    su-pa- → スーパー<br><br>

                    <strong>促音示例：</strong><br>
                    sakki → さっき（重复子音）<br>
                    motto → もっと（重复子音）<br>
                    xtsu → っ（直接输入）<br><br>

                    <strong>外来语示例：</strong><br>
                    vaiolin → ヴァイオリン<br>
                    fairuファイル → ファイル<br>
                    shefu → シェフ<br><br>

                    <strong>小写假名示例：</strong><br>
                    xya → ゃ<br>
                    xa → ぁ
                </div>示例：</strong><br>
                konnichiwa → こんにちは<br>
                KONNICHIWA → コンニチハ<br>
                arigatou gozaimasu → ありがとう ございます<br><br>

                <strong>促音示例：</strong><br>
                sakki → さっき（重复子音）<br>
                motto → もっと（重复子音）<br>
                xtsu → っ（直接输入）<br>
                XTSU → ッ（直接输入）
            </div>

            <p><strong>支持的假名：</strong>包括五十音图的基本假名、浊音、半浊音、拗音、促音等常用假名组合。</p>
        </div>
    </div>
    </div>

    <footer class="footer" id="footerlnk">
        <div class="footer-links">
            <a target="_blank" href="https://kibidango.top" onclick="showInfo('作者主页')">Kibidango086</a>
            <a target="_blank" href="https://github.com/Kibidango086/romanji2kana" onclick="showInfo('Github 仓库')">Github 仓库</a>
        </div>
        <p>日语假名输入器</p>
    </footer>

    <div id="toast" class="toast"></div>

    <script>
        // 假名转换映射表
        const kanaMap = {
            // 基本假名
            'a': 'あ', 'A': 'ア', 'i': 'い', 'I': 'イ', 'u': 'う', 'U': 'ウ',
            'e': 'え', 'E': 'エ', 'o': 'お', 'O': 'オ',
            'ka': 'か', 'KA': 'カ', 'ki': 'き', 'KI': 'キ', 'ku': 'く', 'KU': 'ク',
            'ke': 'け', 'KE': 'ケ', 'ko': 'こ', 'KO': 'コ',
            'sa': 'さ', 'SA': 'サ', 'shi': 'し', 'SHI': 'シ', 'su': 'す', 'SU': 'ス',
            'se': 'せ', 'SE': 'セ', 'so': 'そ', 'SO': 'ソ',
            'ta': 'た', 'TA': 'タ', 'chi': 'ち', 'CHI': 'チ', 'tsu': 'つ', 'TSU': 'ツ',
            'te': 'て', 'TE': 'テ', 'to': 'と', 'TO': 'ト',
            'na': 'な', 'NA': 'ナ', 'ni': 'に', 'NI': 'ニ', 'nu': 'ぬ', 'NU': 'ヌ',
            'ne': 'ね', 'NE': 'ネ', 'no': 'の', 'NO': 'ノ',
            'ha': 'は', 'HA': 'ハ', 'hi': 'ひ', 'HI': 'ヒ', 'fu': 'ふ', 'FU': 'フ',
            'he': 'へ', 'HE': 'ヘ', 'ho': 'ほ', 'HO': 'ホ',
            'ma': 'ま', 'MA': 'マ', 'mi': 'み', 'MI': 'ミ', 'mu': 'む', 'MU': 'ム',
            'me': 'め', 'ME': 'メ', 'mo': 'も', 'MO': 'モ',
            'ya': 'や', 'YA': 'ヤ', 'yu': 'ゆ', 'YU': 'ユ', 'yo': 'よ', 'YO': 'ヨ',
            'ra': 'ら', 'RA': 'ラ', 'ri': 'り', 'RI': 'リ', 'ru': 'る', 'RU': 'ル',
            're': 'れ', 'RE': 'レ', 'ro': 'ろ', 'RO': 'ロ',
            'wa': 'わ', 'WA': 'ワ', 'wi': 'ゐ', 'WI': 'ヰ', 'we': 'ゑ', 'WE': 'ヱ',
            'wo': 'を', 'WO': 'ヲ', 'nn': 'ん', 'NN': 'ン', 'n': 'ん', 'N': 'ン',

            // 长音符
            '-': 'ー', '_': 'ー', '~': 'ー', 'ー': 'ー',

            // 促音（直接输入）
            'xtsu': 'っ', 'XTSU': 'ッ', 'xtu': 'っ', 'XTU': 'ッ',
            'ltsu': 'っ', 'LTSU': 'ッ', 'ltu': 'っ', 'LTU': 'ッ',
            'sokuon': 'っ', 'SOKUON': 'ッ',

            // 小写假名（用于拗音等）
            'xya': 'ゃ', 'XYA': 'ャ', 'xyu': 'ゅ', 'XYU': 'ュ', 'xyo': 'ょ', 'XYO': 'ョ',
            'lya': 'ゃ', 'LYA': 'ャ', 'lyu': 'ゅ', 'LYU': 'ュ', 'lyo': 'ょ', 'LYO': 'ョ',
            'xa': 'ぁ', 'XA': 'ァ', 'xi': 'ぃ', 'XI': 'ィ', 'xu': 'ぅ', 'XU': 'ゥ',
            'xe': 'ぇ', 'XE': 'ェ', 'xo': 'ぉ', 'XO': 'ォ',
            'la': 'ぁ', 'LA': 'ァ', 'li': 'ぃ', 'LI': 'ィ', 'lu': 'ぅ', 'LU': 'ゥ',
            'le': 'ぇ', 'LE': 'ェ', 'lo': 'ぉ', 'LO': 'ォ',
            'xwa': 'ゎ', 'XWA': 'ヮ', 'lwa': 'ゎ', 'LWA': 'ヮ',
            'xka': 'ヵ', 'XKA': 'ヵ', 'lka': 'ヵ', 'LKA': 'ヵ',
            'xke': 'ヶ', 'XKE': 'ヶ', 'lke': 'ヶ', 'LKE': 'ヶ',

            // 浊音
            'ga': 'が', 'GA': 'ガ', 'gi': 'ぎ', 'GI': 'ギ', 'gu': 'ぐ', 'GU': 'グ',
            'ge': 'げ', 'GE': 'ゲ', 'go': 'ご', 'GO': 'ゴ',
            'za': 'ざ', 'ZA': 'ザ', 'ji': 'じ', 'JI': 'ジ', 'zu': 'ず', 'ZU': 'ズ',
            'ze': 'ぜ', 'ZE': 'ゼ', 'zo': 'ぞ', 'ZO': 'ゾ',
            'da': 'だ', 'DA': 'ダ', 'di': 'ぢ', 'DI': 'ヂ', 'du': 'づ', 'DU': 'ヅ',
            'de': 'で', 'DE': 'デ', 'do': 'ど', 'DO': 'ド',
            'ba': 'ば', 'BA': 'バ', 'bi': 'び', 'BI': 'ビ', 'bu': 'ぶ', 'BU': 'ブ',
            'be': 'べ', 'BE': 'ベ', 'bo': 'ぼ', 'BO': 'ボ',
            'vu': 'ゔ', 'VU': 'ヴ',

            // 半浊音
            'pa': 'ぱ', 'PA': 'パ', 'pi': 'ぴ', 'PI': 'ピ', 'pu': 'ぷ', 'PU': 'プ',
            'pe': 'ぺ', 'PE': 'ペ', 'po': 'ぽ', 'PO': 'ポ',

            // 拗音
            'kya': 'きゃ', 'KYA': 'キャ', 'kyu': 'きゅ', 'KYU': 'キュ', 'kyo': 'きょ', 'KYO': 'キョ',
            'sha': 'しゃ', 'SHA': 'シャ', 'shu': 'しゅ', 'SHU': 'シュ', 'sho': 'しょ', 'SHO': 'ショ',
            'cha': 'ちゃ', 'CHA': 'チャ', 'chu': 'ちゅ', 'CHU': 'チュ', 'cho': 'ちょ', 'CHO': 'チョ',
            'nya': 'にゃ', 'NYA': 'ニャ', 'nyu': 'にゅ', 'NYU': 'ニュ', 'nyo': 'にょ', 'NYO': 'ニョ',
            'hya': 'ひゃ', 'HYA': 'ヒャ', 'hyu': 'ひゅ', 'HYU': 'ヒュ', 'hyo': 'ひょ', 'HYO': 'ヒョ',
            'mya': 'みゃ', 'MYA': 'ミャ', 'myu': 'みゅ', 'MYU': 'ミュ', 'myo': 'みょ', 'MYO': 'ミョ',
            'rya': 'りゃ', 'RYA': 'リャ', 'ryu': 'りゅ', 'RYU': 'リュ', 'ryo': 'りょ', 'RYO': 'リョ',
            'gya': 'ぎゃ', 'GYA': 'ギャ', 'gyu': 'ぎゅ', 'GYU': 'ギュ', 'gyo': 'ぎょ', 'GYO': 'ギョ',
            'ja': 'じゃ', 'JA': 'ジャ', 'ju': 'じゅ', 'JU': 'ジュ', 'jo': 'じょ', 'JO': 'ジョ',
            'bya': 'びゃ', 'BYA': 'ビャ', 'byu': 'びゅ', 'BYU': 'ビュ', 'byo': 'びょ', 'BYO': 'ビョ',
            'pya': 'ぴゃ', 'PYA': 'ピャ', 'pyu': 'ぴゅ', 'PYU': 'ピュ', 'pyo': 'ぴょ', 'PYO': 'ピョ',

            // 外来语用假名（片假名）
            'va': 'ヴァ', 'VA': 'ヴァ', 'vi': 'ヴィ', 'VI': 'ヴィ', 've': 'ヴェ', 'VE': 'ヴェ',
            'vo': 'ヴォ', 'VO': 'ヴォ', 'vya': 'ヴャ', 'VYA': 'ヴャ', 'vyu': 'ヴュ', 'VYU': 'ヴュ',
            'vyo': 'ヴョ', 'VYO': 'ヴョ',
            'fa': 'ファ', 'FA': 'ファ', 'fi': 'フィ', 'FI': 'フィ', 'fe': 'フェ', 'FE': 'フェ',
            'fo': 'フォ', 'FO': 'フォ', 'fya': 'フャ', 'FYA': 'フャ', 'fyu': 'フュ', 'FYU': 'フュ',
            'fyo': 'フョ', 'FYO': 'フョ',
            'wi': 'ウィ', 'WI': 'ウィ', 'we': 'ウェ', 'WE': 'ウェ',
            'she': 'シェ', 'SHE': 'シェ', 'je': 'ジェ', 'JE': 'ジェ', 'che': 'チェ', 'CHE': 'チェ',
            'ti': 'ティ', 'TI': 'ティ', 'tu': 'トゥ', 'TU': 'トゥ', 'di': 'ディ', 'DI': 'ディ',
            'du': 'ドゥ', 'DU': 'ドゥ', 'tsa': 'ツァ', 'TSA': 'ツァ', 'tse': 'ツェ', 'TSE': 'ツェ',
            'tso': 'ツォ', 'TSO': 'ツォ',
            'kwa': 'クァ', 'KWA': 'クァ', 'kwi': 'クィ', 'KWI': 'クィ', 'kwe': 'クェ', 'KWE': 'クェ',
            'kwo': 'クォ', 'KWO': 'クォ', 'gwa': 'グァ', 'GWA': 'グァ', 'gwi': 'グィ', 'GWI': 'グィ',
            'gwe': 'グェ', 'GWE': 'グェ', 'gwo': 'グォ', 'GWO': 'グォ',

            // 其他替代拼写
            'si': 'し', 'SI': 'シ', 'zi': 'じ', 'ZI': 'ジ', 'ti': 'ち', 'TI': 'チ',
            'tu': 'つ', 'TU': 'ツ', 'hu': 'ふ', 'HU': 'フ', 'hou': 'ほう', 'HOU': 'ホウ',
            'ou': 'おう', 'OU': 'オウ', 'uu': 'うう', 'UU': 'ウウ', 'ei': 'えい', 'EI': 'エイ',
            'ii': 'いい', 'II': 'イイ', 'aa': 'ああ', 'AA': 'アア', 'ee': 'ええ', 'EE': 'エエ',
            'oo': 'おお', 'OO': 'オオ'
        };

        // 按长度排序键，确保长的罗马音优先匹配
        const sortedKeys = Object.keys(kanaMap).sort((a, b) => b.length - a.length);

        // 定义集合，用于检测促音
        const consonants = ['k', 'g', 's', 'z', 't', 'd', 'p', 'b', 'c', 'j', 'f'];

        function convertToKana(text) {
            let result = '';
            let i = 0;

            while (i < text.length) {
                let matched = false;

                // 检查是否存在重复子音（促音情况）
                if (i < text.length - 1) {
                    let currentChar = text[i];
                    let nextChar = text[i + 1];

                    // 检查是否是重复子音
                    if (consonants.includes(currentChar.toLowerCase()) &&
                        currentChar.toLowerCase() === nextChar.toLowerCase()) {

                        // 检查后面是否能形成有效的假名
                        let tempIndex = i + 1;
                        let foundKana = false;

                        // 尝试匹配从重复子音开始的假名
                        for (let key of sortedKeys) {
                            if (tempIndex + key.length <= text.length &&
                                text.substring(tempIndex, tempIndex + key.length) === key) {
                                // 找到了有效的假名组合
                                let sokuonChar = currentChar.toLowerCase() === currentChar ? 'っ' : 'ッ';
                                result += sokuonChar + kanaMap[key];
                                i = tempIndex + key.length;
                                foundKana = true;
                                matched = true;
                                break;
                            }
                        }

                        // 如果没有找到有效的假名，继续正常匹配
                        if (!foundKana) {
                            matched = false;
                        }
                    }
                }

                // 如果没有找到促音，继续正常的假名匹配
                if (!matched) {
                    // 尝试匹配最长的可能组合
                    for (let key of sortedKeys) {
                        if (text.substring(i, i + key.length) === key) {
                            result += kanaMap[key];
                            i += key.length;
                            matched = true;
                            break;
                        }
                    }
                }

                // 如果没有匹配，保持原字符
                if (!matched) {
                    result += text[i];
                    i++;
                }
            }

            return result;
        }

        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('show');
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }

        function showInfo(topic) {
            showToast(`点击了 ${topic}`);
        }

        // 事件监听器
        document.addEventListener('DOMContentLoaded', function () {
            const romanInput = document.getElementById('romanInput');
            const kanaOutput = document.getElementById('kanaOutput');
            const copyBtn = document.getElementById('copyBtn');
            const pasteBtn = document.getElementById('pasteBtn');
            const clearBtn = document.getElementById('clearBtn');

            // 实时转换
            romanInput.addEventListener('input', function () {
                const converted = convertToKana(this.value);
                kanaOutput.value = converted;
            });

            // 复制功能
            copyBtn.addEventListener('click', function () {
                if (kanaOutput.value) {
                    navigator.clipboard.writeText(kanaOutput.value).then(function () {
                        showToast('已复制到剪贴板！');
                    }).catch(function () {
                        // 备选方案
                        kanaOutput.select();
                        document.execCommand('copy');
                        showToast('已复制到剪贴板！');
                    });
                } else {
                    showToast('没有内容可复制');
                }
            });

            // 粘贴功能
            pasteBtn.addEventListener('click', function () {
                navigator.clipboard.readText().then(function (text) {
                    romanInput.value = text;
                    romanInput.dispatchEvent(new Event('input'));
                    showToast('已粘贴内容！');
                }).catch(function () {
                    showToast('无法读取剪贴板内容');
                });
            });

            // 清空功能
            clearBtn.addEventListener('click', function () {
                romanInput.value = '';
                kanaOutput.value = '';
                romanInput.focus();
                showToast('已清空内容！');
            });

            // 自动聚焦输入框
            romanInput.focus();
        });
    </script>
</body>

</html>